<template>
  <ul class="privilege_group">
      <li class="privilege_item" v-if="levelInfoObj.freightChargeCoupon">
      <svg class="privilege_tag icon special-svg" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-freight" fill="#ff0000"></use>
      </svg>
      <p class="privilege_text">运费抵扣券</p>
    </li>
    <li class="privilege_item" v-if="levelInfoObj.freightReduction">
      <svg class="privilege_tag icon special-svg" aria-hidden="true">
        <use xlink:href="#el-icon-knife-freight-reduce" fill="#ff0000"></use>
      </svg>
      <p class="privilege_text">运费减免</p>
    </li>
    <li class="privilege_item" v-if="levelInfoObj.accountAcceptance">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-bank"></use>
      </svg>
      <p class="privilege_text">银行承兑</p>
    </li>
    <li class="privilege_item" v-if="levelInfoObj.brandOffsetCoupon">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-coupons"></use>
      </svg>
      <p class="privilege_text">品牌抵扣券</p>
    </li>
     <li class="privilege_item" v-if="levelInfoObj.deductibleVoucher">
      <svg class="privilege_tag icon special-svg" aria-hidden="true">
        <use xlink:href="#el-icon-knife-reduce" fill="#ff0000"></use>
      </svg>
      <p class="privilege_text">满减抵扣券</p>
    </li>
    <li class="privilege_item" v-if="levelInfoObj.invoiceFreeShipping">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-invoice"></use>
      </svg>
      <p class="privilege_text">发票包邮</p>
    </li>
    <li class="privilege_item" v-if="levelInfoObj.quickRefund">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-refund"></use>
      </svg>
      <p class="privilege_text">极速退款</p>
    </li>
    <li class="privilege_item " v-if="levelInfoObj.repairTheCaliperFree">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-maintena"></use>
      </svg>
      <p class="privilege_text">卡尺维修</p>
    </li>
    <li class="privilege_item " v-if="levelInfoObj.exclusiveCustomerService">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-vip-service"></use>
      </svg>
      <p class="privilege_text">专属客服</p>
    </li>
    <li class="privilege_item " v-if="levelInfoObj.brandGiftBag">
      <svg class="privilege_tag icon" aria-hidden="true">
        <use xlink:href="#el-icon-knife-membersvip-trial"></use>
      </svg>
      <p class="privilege_text">品牌试用</p>
    </li>
  </ul>
</template>

<script>
import '../../assets/icon/iconfont.js'

export default {
  name: 'privilege',
  props: ['levelInfoObj']
}
</script>

<style lang="scss" scoped>
  .privilege{
      &_group{
        overflow: hidden;
        margin-top: 25px;
      }
      &_item{
        float: left;
        margin-right: 114px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 14px;
        &:nth-child(5n){
          margin-right: 0;
        }
      }
      &_tag{
        // font-size: 95px;
        width: 84px;
        height: 96px;
        color: rgba(241,90,36,0.9);
      }
      &_text{
        margin-top: -14px;
        color: #333;
        font-size: 16px;
        line-height: 22px;
      }
    }

</style>
<style>
  /* svg.special-svg path{
    fill: inherit;
  }
  .privilege_tag path {
    fill: inherit;
    all: inherit;
}
svg { fill: currentColor; } */
</style>

